<template>
    <view class="page">
        <comHead :datas="datasObj"> <template #headerContent> </template> </comHead>
        <view class="content_box">
            <view class="card_box">
                <view class="card_box_banner">
                    <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/bt_banner.jpg"></image>
                    <view class="log">
                        <image class="wh-100" :src="dataList.cover" mode="aspectFill" />
                    </view>
                </view>
                <view class="card_box_title ft-28 c-33 fw-800 mt-30">{{ dataList.name }}</view>
                <view class="card_box_name ft-24 c-66  mt-20">{{ dataList.full_name }}</view>
                <view class="card_box_tag flex  mt-30">
                    <view class="tags bd-r40" v-for="tagItem in dataList.tag" :key="tagItem">{{ tagItem }}</view>
                </view>
                <view class="card_box_userNumber">
                    <text>{{ '老师数' }} <text class="ft-num3 ft-34 c-33">{{ dataList.sale_num }}</text></text>
                    <text class="line"
                        style="display: inline-block;width: 2rpx;height: 30rpx;background-color: #F1F1F1;margin-left: 10rpx;margin-right: 10rpx;"></text>
                    <text>{{ '咨询数' }} <text class="ft-num3 ft-34 c-33">{{ dataList.consult_num }}</text></text>
                    <text class="line"
                        style="display: inline-block;width: 2rpx;height: 30rpx;background-color: #F1F1F1;margin-left: 10rpx;margin-right: 10rpx;"></text>
                    <text>{{ '项目数' }} <text class="ft-num3 ft-34 c-33">{{ dataList.product_num }}</text> </text>

                </view>
            </view>
            <view class="card_boxMsg">
                <view class="ft-28 c-33 fw-800">品牌方信息</view>
                <view class="card_boxMsg_item">
                    <view class="label">企业全称</view>
                    <view class="text">{{ dataList.full_name }}</view>
                </view>
                <view class="card_boxMsg_item">
                    <view class="label">成立时间</view>
                    <view class="text">{{ dataList.establish_time }}</view>
                </view>
                <view class="card_boxMsg_item">
                    <view class="label">所在地</view>
                    <view class="text">{{ dataList.location }}</view>
                </view>
                <view class="card_boxMsg_item">
                    <view class="label">行业类型</view>
                    <view class="text">{{ dataList.industry }}</view>
                </view>
                <view class="card_boxMsg_item">
                    <view class="label">主要业务</view>
                    <view class="text business">
                        <view class="text_container ">
                            {{ dataList.business }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="card_boxDes">
                <view class="ft-28 c-33 fw-800">品牌方介绍</view>
                <view class="card_boxDes_textarea">
                    <view v-html="dataList.desShow"></view>
                </view>
                <view class="card_boxDes_more flex-center" @click="popDesDetail()">
                    <text class="ft-24 c-33">查看更多</text>
                    <image class="icon_samll ml-4 mt-2" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
                    </image>
                </view>
            </view>
            <view class="card_boxTeacher" v-if="dataList.sale_list?.length">
                <view class="ft-28 c-33 fw-800">品牌方老师</view>
                <view class="card_boxTeacher_swiper">
                    <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
                        <view class="scroll-view-item_B mt-24" v-for="item in dataList.sale_list" :key="item.id"
                            @click="goDetail(item.id)">
                            <view class="first flex auto mt-20">
                                <view class="avtor flex-center fs0">
                                    <view class="picture">
                                        <image class="wh-100" style="border-radius: 50%;" :src="item.avatar"
                                            mode="aspectFill">
                                        </image>
                                    </view>
                                </view>
                                <view class="name ml-24">
                                    <view class="shenfen ft" style="font-size: 20rpx; color: #999999">
                                        {{ item.title }}</view>
                                    <view class="mingchen ft mt-12"
                                        style="color: #333333; font-weight: 800; font-size: 28rpx">
                                        {{ item.nickname_show }}
                                    </view>
                                </view>
                            </view>

                            <view class="wordpress auto pd-20 c-66 ft mt-20">
                                <view class="text"> {{
                                    item.des
                                    }}</view>


                            </view>
                            <view class="button flex-center ml-20 mt-20">
                                <text class="ft" style="color: #fff; margin-right: 8rpx">
                                    {{ "预约咨询" }}
                                </text>
                                <image class="wh-24 mt-2" src="https://cdn.oss.bon-top.cn/static_bc/images/icon11.png">
                                </image>
                            </view>
                        </view>
                    </scroll-view>
                </view>

            </view>
            <view class="card_boxProject">
                <view class="card_boxProject_title flex-bwt">
                    <view class="left">
                        <view class="up">#品牌方项目#</view>
                        <view class="down ft-eng">Brand side project</view>
                    </view>

                </view>
                <view class="pd-20">
                    <ComProjectList class="pd-20" v-if="productList.length > 0" :dataList="productList"
                        :dataObj="productListObj" @getProjectList="getProductListData">
                    </ComProjectList>
                </view>


            </view>
        </view>
    </view>
    <!-- 地址弹窗 -->
    <u-popup :show="showPup" @close="showPup = !showPup" :round="20">
        <!-- 弹窗标题与关闭按钮 -->
        <view class="popup-header">
            <view>
                <text class="ft-32 c-33 fw-800">品牌方介绍</text>
                <view class="ft-24 c-99 mt-10 fullName">{{ dataList.full_name }}</view>
            </view>
            <view @click="showPup = !showPup">
                <image class="icons" src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png" mode="aspectFit">
                </image>
            </view>
        </view>
        <scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
            <view class="pop_card_box pd-20">
                <view class="vHtml" v-html="dataList.des"></view>
                <view style="height: 20rpx;width: 100%;"></view>
            </view>

        </scroll-view>
        <view class="box">

            <view class="address_botton" @click="showPup = !showPup">确定</view>
        </view>

    </u-popup>
</template>
<script setup lang="js">
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
import { utils } from '@/utils/utils.js';
import { api } from '@/utils/api.js';
import comHead from '@/components/comHead.vue';
import ComProjectList from "@/components/comProjectList.vue";

let datasObj = reactive({
    title: '品牌商详情',
    img: '',
    color: '#FFFFFF',
    direction: '',
    scrollTop: 0,
    noBack: false,
    height: 88
})
const showPup = ref(false)
const popDesDetail = () => {
    showPup.value = !showPup.value
}
const dataList = ref([])
const getBrandDetail = () => {
    utils.request(api.getBrandDetail, { id: bt_id.value }, 'get',).then(res => {
        console.log('res', res)
        dataList.value = res.data.info
        dataList.value.desShow = dataList.value.des?.length > 100 ? dataList.value.des.slice(0, 100) + '...' : dataList.value.des
    })
}
const goDetail = (id) => {
    uni.navigateTo({
        url: `/subpackage/teacher/teacherDetail?id=${id}`,
    })
}
//更多项目
const goMorePro = () => {
    uni.reLaunch({
        url: `/pages/cart/cart`
    })
}
//获取热门项目列表
const productList = ref([]);
let productListObj = reactive([]);
const getProductListData = () => {
    utils
        .request(
            api.getProductList,
            {
                page: 1,
                pageSize: 5,
                brand_id: bt_id.value,
            },
            "post"
        )
        .then((res) => {
            productListObj = res.data
            productList.value = [...productList.value, ...res.data.items]
        });
};
const bt_id = ref('')
onLoad((option) => {
    bt_id.value = option.id
    getBrandDetail()
    getProductListData()
})
</script>
<style lang="scss">
/* 头部与关闭按钮 */
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    border-bottom: 1px solid #eee;
    font-size: 28rpx;
    background-color: #F8F8F8;
    border-radius: 40rpx 40rpx 0 0;

    .icons {
        width: 36rpx;
        height: 36rpx;
    }
}

.pop_card_box {
    height: 850rpx;
    background-color: #F8F8F8;
    display: flex;
    flex-direction: column;

    .vHtml {
        flex: 1;
        font-size: 24rpx;
        color: #666666;
    }




}

.box {
    height: 100rpx;

    .address_botton {
        width: 448rpx;
        height: 78rpx;
        background: #333333;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        font-size: 28rpx;
        color: #DBF046;
        text-align: center;
        line-height: 78rpx;
        margin: 0 auto;
        margin-top: 20rpx;


    }
}



.content_box {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;

    .card_boxDes,
    .card_box,
    .card_boxMsg,
    .card_boxTeacher {
        background: #F8F8F8;
        padding: 20rpx;
        border-radius: 40rpx;
        margin-bottom: 20rpx;
        box-sizing: border-box;


    }

    .card_box {

        &_banner {
            width: 650rpx;
            height: 232rpx;
            border-radius: 40rpx;
            overflow: hidden;
            margin: 0 auto;
            position: relative;

            .log {
                position: absolute;
                top: 0;
                left: calc(50% - (176rpx / 2));
                width: 176rpx;
                height: 52rpx;
                background-color: #fff;
                border-radius: 0 0 20rpx 20rpx;
                padding: 4rpx 20rpx;
                box-sizing: border-box;
            }
        }

        &_tag {
            justify-content: flex-start;
            gap: 20rpx;

            .tags {
                padding: 12rpx 20rpx;
                background: #F1F1F1;
                font-size: 24rpx;
                color: #666;
            }
        }

        &_userNumber {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            background-color: #fff;
            font-size: 24rpx;
            color: #666;
            height: 74rpx;
            border-radius: 20rpx;
            margin-top: 20rpx;

        }
    }

    .card_boxMsg {


        &_item {
            // min-height: 74rpx;
            // padding: 20rpx ;
            background: #FFFFFF;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            margin-top: 20rpx;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding: 20rpx;
            box-sizing: border-box;

            .label {
                width: 96rpx;
                height: 34rpx;
                font-weight: 800;
                font-size: 24rpx;
                color: #333333;
            }

            .text {
                width: 454rpx;
                // height: 100%;
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
                text-align: right;
            }

            .business {
                display: flex !important;
                flex-direction: column !important;
                flex: 1;
                margin-left: 100rpx;
            }




        }
    }

    .card_boxDes {
        &_textarea {
            width: 650rpx;
            min-height: 210rpx;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            font-size: 24rpx;
            color: #666666;
            padding: 20rpx;
            box-sizing: border-box;
        }

        &_more {
            width: 650rpx;
            height: 74rpx;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
            border-radius: 0rpx 0rpx 40rpx 40rpx;
        }
    }

    .card_boxTeacher {
        height: 498rpx;

        &_swiper {
            height: 100%;

            .scroll-view_H {
                white-space: nowrap;
                width: 100%;
                height: 100%;
            }

            .scroll-view-item_B {
                display: inline-block;
                width: 380rpx;
                height: 398rpx;
                background: #ffffff;
                border-radius: 40rpx 40rpx 40rpx 40rpx;
                border: 2rpx solid #f1f1f1;
                margin-right: 20rpx;

                .first {
                    box-sizing: border-box;
                    // border: #9c0000 solid 2rpx;
                    width: 100%;
                    height: 88rpx;
                    padding: 0 12rpx;

                    .avtor {
                        border-radius: 50%;
                        width: 88rpx;
                        height: 88rpx;
                        border: solid 2rpx #dbf046;

                        .picture {
                            width: 72rpx;
                            height: 72rpx;
                        }
                    }

                    .name {}
                }

                .wordpress {

                    width: 340rpx;
                    height: 176rpx;
                    background: #f8f8f8;
                    border-radius: 20rpx 20rpx 20rpx 20rpx;

                    .text {
                        display: -webkit-box;
                        word-break: break-all;
                        white-space: pre-line;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 4;
                    }
                }

                .button {
                    width: 170rpx;
                    height: 54rpx;
                    background: #333333;
                    border-radius: 20rpx 20rpx 20rpx 20rpx;
                    color: #ffffff;

                }
            }
        }
    }

    .card_boxProject {
        background: linear-gradient(180deg, #FBFFDF 0%, #FFFFFF 100%);
        padding-top: 20rpx;
        border-radius: 40rpx;

        &_title {
            .left {
                position: relative;
                flex: 1;
                height: 44rpx;

                .up {
                    width: 100%;
                    height: 44rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 800;
                    font-size: 32rpx;
                    color: #333333;
                    position: absolute;
                    top: 0;
                    left: 20rpx;
                    z-index: 9;
                }

                .down {
                    width: 100%;
                    height: 44rpx;
                    position: absolute;
                    top: 14rpx;
                    left: 20rpx;
                    font-family: 'DIN COROS';
                    font-weight: 400;
                    font-size: 44rpx;
                    color: #dbf046;
                    opacity: 0.8;
                    z-index: 2;
                    opacity: 0.6;

                }
            }

            .more {
                width: 122rpx;
                margin-right: 20rpx;
                height: 54rpx;

                display: flex;
                justify-content: center;
                align-items: center;
                background: #ffffff;
                border-radius: 20rpx 20rpx 20rpx 20rpx;
                border: 2rpx solid #333333;

                .text {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                    margin-right: 8rpx;
                }

                .icon {
                    width: 24rpx;
                    height: 24rpx;
                }
            }

        }
    }
}
</style>